<template>
  <main>
    <c-header :menus="[]" :btns="btns" /> 

    <am-container>
      <am-row custom-class="dg-art">
        <!-- 头像基本信息 -->
        <am-col :span="12">
          <am-row>
            <div class="am-u-sm-8 am-u-sm-centered am-u-md-2 am-u-md-uncentered">
              <am-image custom-class="am-center" v-lazy="static_pic + designer.headImagePath" :src="''" :responsive="true" :round="true" alt="" />
            </div>
            <div class="am-u-sm-12 am-u-md-10">
              <p>
                姓名：{{ designer.name }}
              </p>
              <p>
                介绍：{{ designer.introduction }}
              </p>
              <p>
                性别：{{ designer.sex === '1' ? '男' : '女' }}
              </p>
              <p>
                电话：{{ designer.tel }}
              </p>
            </div>
          </am-row>
        </am-col>
      </am-row>

      <am-row>
        <am-col :span="12">
          <p v-if="!worksData">没有作品</p>
          <!-- 作品列表 -->
          <div class="am-u-sm-12 am-u-md-4 am-u-lg-3" v-for='(works, index) in worksData' :key="index">
            <section class="am-margin-bottom">
              <div class="dg-panel-bd" style="position:relative;z-index:200">
                <router-link :to="'/worksDetail/' + works.ID">
                  <am-image v-lazy="thumbnail + works.mainPic" custom-class="am-center am-radius" :responsive="true" :src="''" alt="" />
                </router-link>
                <div class="dg-blur-img" :style="{'background-image': `url(${ thumbnail + works.mainPic })`}"></div>
              </div>
              <footer class="am-panel-footer">
                <span class="am-link-muted">{{ works.name }}</span>
              </footer>
            </section>
          </div>
          <div class="am-u-end"></div>
        </am-col>
      </am-row>
    </am-container>
  </main>
</template>

<script>
import Header from '@/components/Header'

export default {
  name: 'designer-detail',
  data() {
    return {
      inGame: {
        '全部作品': -1,
        '参赛中作品': 1
      },
      worksData: [],
      designer: {},
      page: {
        num: 1,
        limit: 4,
        res: {
          count: 0,
          total: 0
        }
      },
      btns: [{
        name: '返回上一级',
        href: '/designerList'
      }]
    }
  },
  components: {
    CHeader: Header
  },
  computed: {
    designerID() {
      return this.$route.params.id;
    }
  },
  methods: {
    ready() {
      this.loadData();
    },
    loadData() {
      this.loadDesigner();
      this.loadDesignerWorks();
    },
    loadDesigner() {
      return new Promise((resove, reject) => {
        this.dgpost(this.api.GETDESIGNERBYID, {
          designerID: this.designerID
        }).then(res => {
          this.designer = res.data.data
        })
      });
    },
    loadDesignerWorks() {
      this.dgpost(this.api.GETWORKSDATAPAGE, {
        inGame: this.inGame['参赛中作品'],
        designerID: +this.designerID,
        pageNum: +this.page.num,
        numPerPage:　+this.page.limit,
        worksName: ''
      }).then(res => {
        if(res.data.result !== 1) {
          console.log('designer-detail', res.data.msg);
        } else {
          console.log(res.data.data)
          this.worksData = res.data.data.work;
        }
      });
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style>
.base-thumbnail {
  max-width: 170px;
}
</style>
